<template>
	<div class="tabtwo">
		<div class="handBox">
			<!--sidebar_l左边列表模块-->
			<div class="sidebar_l fix">
				<ul>
					<li>
						<label :class="{clr:clr1,selected:selected1}">品牌</label>
					</li>
					<li>
						<label :class="{clr:clr2,selected:selected2}">车型</label>
					</li>
					<li>
						<label :class="{clr:clr3,selected:selected3}">年款</label>
					</li>
					<li>
						<label :class="{clr:clr4,selected:selected4}">排挡版本</label>
					</li>
				</ul>
			</div>
			<!--sidebar_r右边列表模块-->
			<div class="sidebar_r fix" scroll="none">
				<div class="blocks">
					<div class="selcar selcar1">
						<hgroup v-for="item in list" v-show="lione">
							<h3>{{item.key}}</h3>
							<li v-for="li in item.value" @click="tradeMark(li.autoBrandID)">
								{{li.goods_brand_name}}
							</li>
						</hgroup>
						<hgroup v-show="litwo">
							<h3>{{listtwoName}} {{yearTypeTitle}} {{yearTitle}}<span v-if="yearTitle">款</span></h3>
							<ul v-for="item in listtwoNameItem" v-show="litwoChild1">
								<p>{{item}}</p>
								<ul>
									<li v-for="itemLi in listtwoTit[item]" @click="carModels(itemLi.autoSystemID)">
										{{itemLi.auto_style_system}}
									</li>
								</ul>
							</ul>
							
							<ul v-show="litwoChild2">
								<li v-for="(item,index) in litwoChild2Tit" @click="carModels2(index)">
									{{item.auto_style_type}}
								</li>
							</ul>
							<ul v-show="lithreeChild">
								<li v-for="(item,index) in yearType" @click="gearVersion(index)">
									{{item.auto_style_year}}款({{item.auto_style_productive_year}}-{{item.auto_style_stop_production}})
								</li>
							</ul>
							<ul v-show="lifourChild">
								<li v-for="(item,index) in gearVersionitem" @click="lastItem(index)">
									{{item.auto_style_sales_name}}
								</li>
							</ul>
						</hgroup>
					</div>
				</div>
			</div>
		</div>
		<!------遮罩层------>
		<div class="floors" v-show="fl">
			<div class="flBox">
				<img src="../assets/img/check.png"/>
				<p class="flTitle">恭喜您，成功选择爱车</p>
				<p>{{flTitle}}</p>
				<p class="fltime"><span> {{fltime}} </span>秒自动跳转</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				list:"",
				values:"",
				clr1: true,
				selected1: true,
				clr2: false,
				selected2: false,
				clr3: false,
				selected3: false,
				clr4: false,
				selected4: false,
				lione: true,
				litwo: false,
				listtwoName: "",
				listtwoNameItem: [],
				listtwoTit: "",
				litwoChild1: true,
				litwoChild2: false,
				litwoChild2Tit: "",
				lithreeChild: false,
				lifourChild: false,
				yearTypeTitle: "",
				yearType: "",
				carTypeData: "",
				yearTitle: "",
				gearVersionitem: "",
				lastTitleName: "",
				flTitle: "",
				fl: false,
				fltime: 5
				
			}
		},
		mounted(){
			this.fetchData();
		},
		methods:{
			fetchData(){
				var that = this;
				this.$http.get("https://www.qpmall.com/web-open/getAllBrands.htm")
				.then(function(res){
					that.list = res.data;
					for(var i = 0; i < res.data.length; i++){
						that.values = res.data[i].value;
					}
					
				})
			},
			tradeMark(Id){
				var that = this;
				this.clr2 = true;
				this.selected2 = true;
				this.selected1 = false;
				this.lione = false;
				this.litwo = true;
				this.listtwoName = Id;
				this.$http.get("https://www.qpmall.com/web-open/getAutoStyleBrand.htm?autoBrandID="+Id)
				.then(function(res){
					var data = res.data;
					for(var i in data){
						that.listtwoNameItem.push(i);
					}
					that.listtwoTit = data;
				})
			},
			carModels(Id){
				var that = this;
				this.$http.get("https://www.qpmall.com/web-open/getAutoType.htm?autoSystemID="+Id)
				.then(function(res){
					that.carTypeData = res.data;
					var carData = res.data;
					if(carData.length != 1){
						that.litwoChild2 = true;
						that.litwoChild1 = false;
						that.litwoChild2Tit = carData;
						
					}else{
						that.litwoChild1 = false;
						that.lithreeChild = true;
						that.selected2 = false;
						that.selected3 = true;
						that.clr3 = true;
						let yearId = res.data[0].autoTypeID;
						that.yearTypeTitle = res.data[0].auto_style_type;
						that.$http.get("https://www.qpmall.com/web-open/getAutoProductiveYearBean.htm?autoTypeID="+yearId).then(function(ress){
							that.yearType = ress.data;
						})
					}
				})
			},
			carModels2(index){
				this.litwoChild2 = false;
				this.lithreeChild = true;
				this.selected2 = false;
				this.selected3 = true;
				this.clr3 = true;
				var yearId2 = this.carTypeData[index].autoTypeID;
				this.yearTypeTitle = this.carTypeData[index].auto_style_type;
				var that = this;
				this.$http.get("https://www.qpmall.com/web-open/getAutoProductiveYearBean.htm?autoTypeID="+yearId2).then(function(ress){
							that.yearType = ress.data;
						})
			},
			gearVersion(index){
				let yearIds = this.yearType[index].autoYearID;
				this.lithreeChild = false;
				this.lifourChild = true;
				this.selected3 = false;
				this.selected4 = true;
				this.clr4 = true;
				var that = this;
				this.yearTitle = that.yearType[index].auto_style_year
				this.$http.get("https://www.qpmall.com/web-open/getAutoParameter1Bean.htm?autoYearID="+yearIds).then(function(res){
							that.gearVersionitem = res.data;
						})
			},
			lastItem(index){
				this.lastTitleName = this.gearVersionitem[index].auto_style_sales_name;
				var carModelData = this.listtwoName + this.yearTypeTitle + this.yearTitle + this.lastTitleName;
				this.flTitle = carModelData;
				sessionStorage.setItem("carData", carModelData);
				this.fl = true;
				var that = this;
				var a = Number(this.fltime);
				var timer = setInterval(function(){
					a --;
					that.fltime = a
					if(that.fltime == 0){
						clearInterval(timer);
						that.$router.push({path:"/main"})
					}
				},1000)
			}
		}
	}
</script>

<style>
</style>